<div class="col-sm-12 col-md-6">
	<div class="thumbnail">
		<div class="caption">
			<h4 class="text-center">正在播放的工程</h4>
			<br/>
			<template v-if="current.index==-1&&current.pid!=null">
				<div class="list-group-item active">
					<span class="badge">正在播放</span>
					{{current.pname}}
				</div>
				<hr/>
			</template>
			
			<template v-if="playList.length > 0">
				<ul class="list-group">
					<template v-for="(item, index) in playList">
						<li :class="index==current.index?'list-group-item active':'list-group-item'">
							<span class="badge" v-if="index==current.index">正在播放</span>
							{{item.pname}}
						</li>
					</template>
				</ul>
			</template>
			<template v-else>
				<div class="alert alert-info">
					没有接下来要播放的工程
				</div>
			</template>
		</div>
	</div>
</div>

<!-- 显示播放列表 -->
<div class="col-sm-12 col-md-6" v-if="s.stats=='display'">
	<div class="thumbnail">
		<div class="caption">
			<h4 class="text-center">正在播放的播放列表</h4>
			<br/>
			<template v-if="playList.length > 0">
				<p class="list-group-item-text">{{current.playListName}}</p>
			</template>
			<template v-else>
				<div class="well well-sm">
					无。现在可以指派一个播放列表
				</div>
			</template>
			<br/>
			
			<div class="btn-group">
				<button type="button" class="btn btn-primary" v-on:click="changeStats('change')">
					修改
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 选择播放列表 -->
<div class="col-sm-12 col-md-6" v-if="s.stats=='change'">
	<div class="thumbnail">
		<div class="caption">
			<h4 class="text-center">选择指派的播放列表</h4>
			<br/>
			<div class="well well-sm">
				指派播放列表后, 需要<b>点击【确定】</b>提交更改。
			</div>
			<div class="btn-group form-group">
				<div class="form-group">
					<label>设置播放列表</label>
					<br/>
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						{{current.selectedPlayList == -1 ? '请选择' : allPlayLists[current.selectedPlayList].name}}
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li v-for="(item, index) in allPlayLists">
							<a href="javascript:" v-on:click="selectPlayList(index)">
								<p class="list-group-item-text">{{item.name}}</p>
								<small><em class="text-muted">{{item.desc}}</em></small>
							</a>
						</li>
					</ul>
					<br/>
					<label v-if="current.selectedPlayList != -1">
						<small><em class="text-muted">{{allPlayLists[current.selectedPlayList].desc}}</em></small>
					</label>
				</div>
			</div>
			<div v-if="current.selectedPlayList == -1" class="alert alert-warning">
				需要指定一个有效的播放列表
			</div>
			<br/>
			<div class="btn-group">
				<button type="button" v-bind:disabled="current.selectedPlayList == -1"
					class="btn btn-primary" v-on:click="submitPlayList()">
					确定
				</button>
				<button type="button" class="btn btn-default" v-on:click="changeStats('display')">
					取消
				</button>
			</div>
		</div>
	</div>
</div>
